;(function(){
	function DeviceNumber(options){
		this.options = {
			data:[],
			colors:[]
		};
		$.extend(this.options,options);
		if( !this.options.el ){
			throw new Error("error: 缺少el参数");return;		
		}

		this.init();
	}

	DeviceNumber.fn = DeviceNumber.prototype;
	

	DeviceNumber.fn.init = function(){
		this.buildDom();
	}

	DeviceNumber.fn.buildDom = function(){
		var self = this;
		var chart = document.createElement("div");	
		chart.className = "device-number-plus-chart flex";

		var numberPlus = document.createElement("ul");	
		numberPlus.className = "device-number-plus";

		var lengedUl = document.createElement("ul");	
			lengedUl.className = "lenged-ul";

		var maxVaule = 0;
		this.options.data.forEach(function(ele,i){
			maxVaule = Number(ele.value)>maxVaule?Number(ele.value):maxVaule;
		})

		this.options.data.forEach(function(ele,i){
			var chartLi = document.createElement("li");	
			chartLi.className = "item";

			var value = document.createElement("div");	
			value.className = "value";
			value.innerHTML = ele.value;

			var line = document.createElement("span");	
			line.className = "line";
			line.style.background = self.options.colors[i];
			line.style.height = (Number(ele.value)/maxVaule).toFixed(2)*100 + "%";

			chartLi.appendChild(value)
			chartLi.appendChild(line)
			numberPlus.appendChild(chartLi)

			var lengedLi = document.createElement("li");	
				lengedLi.className = "lenged-li";

			var lengedi = document.createElement("i");	
				lengedi.style.background = self.options.colors[i];
			var lengedName = document.createElement("span");	
			var lengedNumber = document.createElement("span");	
				lengedName.innerHTML = ele.name;
				lengedNumber.innerHTML = ele.value;

			lengedLi.appendChild(lengedi);
			lengedLi.appendChild(lengedName);
			lengedLi.appendChild(lengedNumber);

			lengedUl.appendChild(lengedLi)

		})

		var lenged = document.createElement("div");	
			lenged.className = "lenged";
			
			lenged.appendChild(lengedUl)
			chart.appendChild(numberPlus)
			chart.appendChild(lenged)

			document.querySelector(this.options.el).appendChild(chart)

	}

	window.DeviceNumber = DeviceNumber;

})();


